<template>
  <view class="homeBox">
    <!-- 搜索框 -->
    <view class="sticky-box">
      <MySearch bgcolor="#f1f1f2" radius="0" @click="goSearch">
        <text>搜索你要找的商品</text>
      </MySearch>
    </view>

    <!-- 轮播图区域 -->
    <swiper
      class="top-swiper"
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="1000"
      :circular="true"
    >
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <navigator
          class="swiper-content"
          :url="`/pages_sub1/product-detail/product-detail?pid=${item.link.form[0].value}`"
        >
          <image :src="item.imgUrl"></image>
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 通告栏 -->
    <uni-notice-bar
      color="red"
      background-color="#f2dbdb"
      showIcon
      scrollable
      single
      :text="str"
    ></uni-notice-bar>

    <!-- 导航组 -->
    <view class="list">
      <div
        class="item"
        v-for="item in navList"
        :key="item.text"
        @click="goCategory"
      >
        <image :src="item.imgUrl"></image>
        <text>{{ item.text }}</text>
      </div>
    </view>

    <!-- 图片 -->
    <view class="img" @click="goCategory">
      <image :src="imgUrl"></image>
    </view>

    <!-- 富文本 -->
    <rich-text :nodes="text"></rich-text>

    <!-- 商品组 -->
    <view class="goods">
      <view
        class="commodity"
        v-for="item in commodityList"
        :key="item.goods_id"
        @click="goDetail(item.goods_id)"
      >
        <!-- 图片 -->
        <image :src="item.goods_image"></image> 
        <!-- 文本 -->
        <view class="text">
          <!-- 名字 -->
          <view class="title">{{ item.goods_name }}</view>
          <!-- 售出 -->
          <view class="sold">已售{{ item.goods_sales }}件</view>
          <!-- 现价 -->
          <text class="current">￥{{ item.goods_price_min }}</text>
          <!-- 原价 -->
          <text class="original">￥{{ item.line_price_min }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import MySearch from "@/components/my-serach";
export default {
  components: {
    MySearch,
  },
  data() {
    return {
      // 轮播图数据
      swiperList: [],
      // 店铺公告
      str: "",
      //   导航组
      navList: [],
      //   图片
      imgUrl: "",
      // 富文本
      text: "",
      // 商品组
      commodityList: [],
    };
  },
  created() {
    this.getHomeList();
  },
  methods: {
    // 获取首页数据
    async getHomeList() {
      const {
        data: { pageData },
      } = await this.$http.get("/page/detail");
      console.log(pageData);
      //   轮播图数据
      this.swiperList = pageData.items[1].data;
      //   店铺公告
      this.str = pageData.items[2].params.text;
      // 导航组
      this.navList = pageData.items[3].data;
      // 图片
      this.imgUrl = pageData.items[4].data[0].imgUrl;
      // 富文本
      this.text = pageData.items[5].params.content;
      // 商品组
      this.commodityList = pageData.items[6].data;
    },
    // 导航组去分类页
    goCategory() {
      uni.switchTab({
        url: "/pages/category/category",
      });
    },
    // 点击搜索跳转搜索页
    goSearch() {
        wx.navigateTo({
            url: '/pages_sub1/search/search'
        })
    },
    // 点击跳转商品详情
    goDetail(id) {
        wx.navigateTo({
            url: "/pages_sub1/product-detail/product-detail?goodsId=" + id
        })
    }
  },
};
</script>

<style lang='scss'>
.homeBox {
  background-color: #f1f1f2;
}
.top-swiper {
  height: 330rpx;

  .swiper-content,
  image {
    width: 100%;
    height: 100%;
  }
}
.list {
  height: 340rpx;
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  .item {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 26rpx;
    image {
      width: 88rpx;
      height: 88rpx;
    }
  }
}
.img {
  height: 240rpx;
  image {
    width: 100%;
    height: 100%;
  }
}
.goods {
  padding: 0 25rpx;
  .commodity {
    width: 700rpx;
    height: 280rpx;
    background-color: white;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    image {
      width: 240rpx;
      height: 240rpx;
      background-color: yellow;
      margin-right: 20rpx;
    }
    .text {
      flex: 1;
      .title {
        text-overflow: ellipsis;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 指定显示文本的行数 */
        overflow: hidden; /* 超出隐藏 */
      }
      .sold {
        margin: 10rpx 0;
        font-size: 24rpx;
        color: #999999;
      }
      .current {
        font-size: 30rpx;
        color: #f03c3c;
      }
      .original {
        margin-left: 10rpx;
        font-size: 24rpx;
        color: #999999;
        text-decoration: line-through;
      }
    }
  }
}
</style>